<template>
  <div class="Cart content" @mousemove="sss">
    <h1>请确认您的订单</h1>
     <ul class="classfiy">
      <li>店铺宝贝</li>
      <li>单价</li>
      <li>数量</li>
      <li>小计</li>
     </ul>
     <div class="xiantiao"></div>
    <div class="top">
      <input class="quanxuan" type="checkbox" v-model="isAllChecked" @click="changeAll(isAllChecked)"> 全选
    </div>
    <ul  v-if="goods.length ==0" class="shadow" >你还没有添加订单或者地址
    </ul>
    <ul v-else v-for="good in goods" class="center">
      <li>
        <div class="select">
          <input type="checkbox" :checked="good.select" @click="good.select = !good.select">
        </div>
        <div class="pic">
          <img :src="good.s_good.s_goods_photos[0].path" alt="">
        </div>
        <div class="name">
          {{good.s_good.name}}
        </div>
        <div class="price">
          ￥ <span>{{good.s_good.price.toFixed(2)}}</span>
        </div>
        <div class="number">
          <button @click="good.num--" :disabled="good.num===1">-</button>
          <span>{{good.num}}</span>
          <button @click="good.num++" :disabled="good.num == good.s_good.stock_num">+</button>
        </div>
        <div class="subtotal">
          ￥ <span>{{(1*good.s_good.price*good.num).toFixed(2)}}</span>
        </div>
        
      </li>
    </ul>
  
    <div class="bottom">
      <p>总价格 : ￥ <span>{{totalMoney.toFixed(2)}}</span></p>
      <p>总购买数量: {{totalSum}}</p>
      <p>地址:{{addressDesc}}</p>
      <p>
   <!-- <button class="list" @click="fanhui">返回购物车页面修改</button> -->
        <div class="pay" @click="goOrderPay">
          去支付
        </div>


      </p>
      
    </div>
  </div>
</template>

<script>
//引入接口数据
import { getCartInfo, del } from "../assets/request.js"
//使用vuex辅助函数
import { mapActions, mapMutations, mapGetters, mapState } from "vuex"

export default {
  inject: ['reload'],
  name: "Cart",
  data() {
    return {
      //存储所有商品信息
      goods: [],
      //ids接收所有商品id
      ids: [],
      //接收判断全选的布尔值
      val: true,
      //接收选中的商品
      goodSelect:[],
      //接收选中的地址
      addressDesc:"请选择好您的地址",
    }
  },
  computed: {
    // ...mapState("cart",["goods"]),
    //判断标准:已选择的数量===数组的长度,那么全选对钩
    //数组goods的长度
    total() {
      return this.goods.length;
    },
    //选中的数量
    selectTotal() {
      return this.goods.reduce((prev, item, index) => { return prev += item.select ? 1 : 0 }
        , 0)
    },
    //是否全选啊
    isAllChecked: {
      get() {
        //console.log(this.total,this.selectTotal);
        return this.total === this.selectTotal;
      },
      set(value) {
        // this.val = value;
        // console.log(value);
        this.goods.forEach((ele) => {
          //  this.$set(element,"checked",value)
          ele.checked = value
        })
      }
    },
    //总选中的购买数量
    totalSum() {
      return this.goods.filter((item) => item.select)
        .reduce((prev, item) => prev += item.num
          , 0)
    },
    //购物车商品总数量
    cart_sum() {
      return this.goods.reduce((prev, item) => {
        return prev += item.num
      }, 0)
    },
    //总价
    totalMoney() {
      return this.goods.filter((item) => item.select)
        .reduce((prev, good) => prev += good.s_good.price * good.num
          , 0)


    },


  },
  watch:{
   
  },
  methods: {
//  ...mapActions("cart",["getShops"]),
    async updataGetCartInfo(){
      await getCartInfo({
      project_id: 260,
    })
    },
   
    sss() {
     
     this.addressDesc=JSON.parse(sessionStorage.getItem('itemSelect')).desc
    },
    ///全选 点击后,就让单选项的checked的值都变为全选的checked
    changeAll(value) {
      //console.log(value);
      value = !value
      this.goods.forEach((element) => {
        element.select = value
        //  this.$set(element,"checked",true)
      })
    },
    //跳转到订单页
    goOrderPay() {
      this.$router.push({
        name:"orderpay"
      })
    },
    // 删除该项商品
    async deleteOne(id) {
      //console.log(id);

      let delRes = await del(id);

      if (confirm("确定删除该商品吗,亲亲?")) {

        //更新本地页面
        let cartInfomation = await getCartInfo({
          project_id: 260,
        });
        //console.log(cartInfomation);
        this.goods = cartInfomation.data.result;
        //this.reload(); 
      }

    },
    //清空购物车
    clearAll() {
      if (confirm("你他妈都要删除,亲亲?")) {
        //console.log(this.goods);
        this.goods.forEach((good, index) => this.ids[index] = good.id)
        this.ids.forEach(async (item) => {
          let rrr = await del(item);
          //更新本地页面
          let cartInfomation = await getCartInfo({
            project_id: 260,
          });
          this.goods = cartInfomation.data.result;


        })


      }

    },
    //删除已选中的
    deleteSelect() {
      if (confirm("不要离开我呜呜呜,亲亲")) {
        this.goods.filter(async (good) => {
          if (good.select) { await del(good.id) }
          //刷新
          let cartInfomation = await getCartInfo({
            project_id: 260,
          });
          this.goods = cartInfomation.data.result;
        })

      }

    },
    //返回列表页
    fanhui() {
      this.$router.push(
        {
          name: "Index",
        }
      )
    },
    //没有商品回到首页区选购
    goIndex() {
      this.$router.push({
        name: "Index",
      })
    },
  },
  //获取购物车信息
  async mounted() {
    
    this.updataGetCartInfo();
    this.addressDesc=JSON.parse(sessionStorage.getItem('itemSelect')).desc
    console.log(this.addressDesc);
   
    // this.reload();
    //console.log(cartInfomation);
    this.goods=JSON.parse(sessionStorage.getItem("goodSelect"))
    this.goods.forEach((element) => {
      this.$set(element, "select", true)
    })
    //console.log(this.goods);
    // await this.getShops();
    // console.log(this.goods.length);
  },
};
</script>

<style lang="scss" scoped>

@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}

.content {
  width: get(1500);
  padding: 10px 0;
  margin: 0 auto;
  margin-top: get(100);
  display: flex;
  flex-direction: column;
 >h1{
  margin-bottom: get(60);
  text-align: start;
 }
 .classfiy{
    display: flex;
    justify-content: space-around;
    margin-bottom: get(20);
    >li{
      opacity: .8;
      font-size: get(12);
      font-weight: 600;
    }
 }
 .xiantiao{
  height: get(1);
  background-color: green;
  margin-bottom: get(50);
 }
 .top >.quanxuan{
  color: black;
  
 
  
}
  .top .bottom {
    height: 40px;
    display: flex;
    align-items: center;
    background-color: pink;
  }
}

.content .top,
.content .bottom {
  overflow: hidden;
  //height: 40px;
  //display: flex;
  //align-items: center;
  background-color: $color1;
  //border:1px solid $color;
}
.content .top{
  width: get(1500);
 text-align: start;
}
.content .top>input {
  width: 20px;
  height: 20px;
  margin: 0 20px;
}

.content >.shadow {
  overflow: hidden;
  width: get(1500);
  height: get(400);
  margin-top: get(200);
}

.content .bottom {
  text-align: end;
  box-shadow: 1px 1px 6px 1px rgb(222, 220, 220),inset;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: end;
  //background-color: $color;
 // justify-content: space-around;
  //border: 1px solid $color;
}

.content .bottom>p {
  font-size: 20px;
  margin-top: 20px;
}

.content .bottom>p>button {
  font-size: 20px;
  padding: 3px 10px;
  cursor: pointer;
  color: #000;
  margin-left: 20px;
  margin-bottom: 20px;
}
.pay{
  font-size: 18px;
  text-align: center;
  color: #fff;
  background-color: $color;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
}













.content .bottom>p>span {
  color: red;
}

.content>.center {
  width: 100%;
}

.content>.center>li {
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #333;
  box-sizing: border-box;
  margin: 10px 0;
  border-radius: 10px;
}

.content>.center>li>div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 20px;
}

.content>.center>li>div>span {
  color: #000;
  padding: 0 10px;
}

.content>.center>li>div:first-child>input {
  width: 20px;
  height: 20px;
}

.content>.center>li>div>button {
  font-size: 20px;
  padding: 5px 10px;
  cursor: pointer;
}

.content>.center>li>div.del>button {
  background-color: red;
  color: #fff;
}

.content>.center>li>div.number>input {
  width: 50px;
  height: 24px;
  font-size: 20px;
  text-align: center;
}

.select,
.pic,
.del {
  width: 100px;
}

.name,
.price,
.subtotal {
  width: 200px;
}

.number {
  width: 300px;
}
</style>


